<template>
    <div class="editor">
        <!-- 新建markdown笔记 -->
        <div id="new_markdown" class="edit_layer">
            <div class="editor_top">
                <input class="editor_title form-control" ref="title_newMarkdown" type="text" placeholder="标题" />
                <div class="dropdown select_category">
                    <select name="" id="select_menu" ref="category1">
                        <option value="1">工作</option>
                        <option value="2">生活</option>
                        <option value="3">学习</option>
                    </select>
                </div>
                <ul class="tools">
                    <li class="save" @click="saveNewMarkdown"></li>
                    <li class="cancel" @click="hideEditorLayer"></li>
                </ul>
            </div>
            <textarea class="text_content form-control" ref="content_newMarkdown" placeholder="内容">
            </textarea>
        </div>
        <!-- 新建涂鸦 -->
        <div id="new_doodle" class="edit_layer">
            <div class="editor_top">
                <input class="editor_title form-control" ref="title_newDoodle" type="text" placeholder="标题" />
                <div class="dropdown select_category">
                    <select name="" id="select_menu" ref="category2">
                        <option value="1">工作</option>
                        <option value="2">生活</option>
                        <option value="3">学习</option>
                    </select>
                </div>
                <ul class="tools">
                    <li class="save" @click="saveNewDoodle"></li>
                    <li class="cancel" @click="hideEditorLayer"></li>
                </ul>
            </div>
            <div class="canvas_wrapper">
                <ul class="doodle_colors">
                    <li data-color="black"></li>
                    <li data-color="green"></li>
                    <li data-color="yellow"></li>
                    <li data-color="red"></li>
                    <li data-color="white"></li>
                </ul>
                <ul class="doodle_controllers">
                    <li class="undo"></li>
                    <li class="redo"></li>
                    <li class="clear"></li>
                </ul>
                <canvas class="doodle_content" width='260' height='260' ref="content_newDoodle"></canvas>
            </div>
        </div>

        <div id="edit_markdown" class="edit_layer">
            <div class="editor_top">
                <input class="editor_title form-control" ref="title_editMarkdown" type="text" placeholder="标题"
                    style="width: 160px" />
                <ul class="tools">
                    <li class="save" @click="saveEditMarkdown"></li>
                    <li class="cancel" @click="hideEditorLayer"></li>
                </ul>
            </div>
            <textarea class="text_content form-control" ref="content_editMarkdown" placeholder="内容"></textarea>
        </div>

        <div id="edit_doodle" class="edit_layer">
            <div class="editor_top">
                <input class="editor_title form-control" ref="title_newDoodle" type="text" placeholder="标题"
                    style="width: 160px" />
                <ul class="tools">
                    <li class="save" @click="saveEditDoodle"></li>
                    <li class="cancel" @click="hideEditorLayer"></li>
                </ul>
            </div>
            <div class="canvas_wrapper">
                <ul class="doodle_colors">
                    <li data-color="black"></li>
                    <li data-color="green"></li>
                    <li data-color="yellow"></li>
                    <li data-color="red"></li>
                    <li data-color="white"></li>
                </ul>
                <ul class="doodle_controllers">
                    <li class="undo"></li>
                    <li class="redo"></li>
                    <li class="clear"></li>
                </ul>
                <canvas class="doodle_content" width='260' height='260' ref="content_newDoodle"></canvas>
            </div>
        </div>
    </div>
</template>
<script>
    import selfSelect from "@/components/self-select.vue";
    export default {
        name: "editor",
        components: { selfSelect },
        data() {
            return {
                category: {
                    1: "5dba9248bd6e1d14208b2598",
                    2: "5dba9276bd6e1d14208b259a",
                    3: "5dba926fbd6e1d14208b2599"
                }
            }
        },
        methods: {
            hideEditorLayer() {
                $('.cover_layer').fadeOut();
                $(".edit_layer").fadeOut();
            },
            saveNewMarkdown() {
                let title = this.$refs.title_newMarkdown.value;
                let content = this.$refs.content_newMarkdown.value;
                let categoryId = this.$refs.category1.value;
                let tagId = this.category[categoryId];
                //console.log(categoryId)
                this.$api.newNote({
                    title: title,
                    content: content,
                    tagId: tagId,
                    state: 1
                }).then(res => {
                    //console.log(res);
                    this.hideEditorLayer();
                })
            },
            saveNewDoodle() {
                let canvasEle = $('#new_doodle .doodle_content')[0];
                let content = canvasEle.toDataURL();
                console.log(content);
                let title = this.$refs.title_newDoodle.value;
                //let content = this.$refs.content_newDoodle.value;
                let categoryId = this.$refs.category2.value;
                let tagId = this.category[categoryId];
                this.$api.newNote({
                    title: title,
                    content: content,
                    tagId: tagId,
                    state: 1
                }).then(res => {
                    //console.log(res);
                    //this.hideEditorLayer();
                })
            },
            saveEditMarkdown() {
                console.log("保存更改后的笔记")
            },
            saveEditDoodle() {
                console.log("保存更改后的涂鸦")
            }
        },
        mounted() {        }
    }
</script>
<style lang="scss" scoped>
    .active {
        display: block;
    }

    .edit_layer {
        width: 264px;
        height: 318px;
        background-color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -142px;
        margin-top: -142px;
        padding: 10px;
        border: 1px solid #f8f8f8;
        border-radius: 3px;
        box-shadow: 0 0 6px 0 #f8f8f8;
        z-index: 3000;
        display: none;

        .editor_top {
            width: 100%;
            margin-bottom: 10px;
            position: relative;
            height: 34px;

            .editor_title {
                display: block;
                width: 120px;
                height: 34px;
                box-sizing: border-box;
                padding: 6px 12px;
                font-size: 14px;
                line-height: 1.42857143;
                color: #555;
                background-color: #fff;
                border: 1px solid #ccc;
                border-radius: 4px;
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
                float: left;
            }

            .editor_title:focus {
                border-color: #66afe9;
                outline: 0;
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
            }

            .select_category {
                width: 66px;
                height: 34px;
                margin-left: 10px;
                float: left;
                transition: all .2s ease-in-out;

                #select_menu {
                    width: 100%;
                    height: 100%;
                    border: 1px solid #ccc;
                    border-radius: 4px;
                    background: #ccc;
                }

                /* .btn {
                    width: 100%;
                    height: 100%;
                    box-sizing: border-box;
                    padding: 6px 12px;
                    font-size: 14px;
                    font-weight: 400;
                    text-align: center;
                    cursor: pointer;
                    background: #ccc;
                    border: 1px solid #ccc;
                    border-radius: 4px;

                    .caret {
                        display: inline-block;
                        width: 0;
                        height: 0;
                        margin-left: 2px;
                        vertical-align: middle;
                        border-color: #333;
                        border-top: 4px dashed;
                        border-right: 4px solid transparent;
                        border-left: 4px solid transparent;
                        border-left: 4px solid transparent;
                    }
                } 
                 .dropdown_menu {
                    width: 66px;
                    position: absolute;
                    left: 0;
                    top: 100%;
                    z-index: 4000;
                    margin-top: 4px;
                    padding: 5px 0;
                    font-size: 14px;
                    text-align: center;
                    background-color: #fff;
                    border: 1px solid rgba(0, 0, 0, .15);
                    border-radius: 4px;
                    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
                    display: none;

                    li {
                        line-height: 26px;
                    }
                } */


            }

            .tools {
                float: left;
                height: 20px;
                margin-top: 8px;

                li {
                    width: 20px;
                    height: 20px;
                    float: left;
                    margin-left: 10px;
                    opacity: .5;
                    transition: opacity .2s ease-in-out;
                }

                .save {
                    background: url(../assets/icons/icon-save.png) no-repeat 0 0;
                }

                .cancel {
                    background: url(../assets/icons/icon-cancel.png) no-repeat 0 0;
                }

                li:hover {
                    opacity: 1;
                    cursor: pointer;
                }
            }
        }

        .text_content {
            width: 240px;
            height: 262px;
            font-size: 12px;
            resize: none;
        }

        .form-control {
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 6px 12px;
            line-height: 1.4;
        }

        .canvas_wrapper {
            position: relative;
            width: 262px;
            height: 270px;
            border: 1px solid #bdbdbd;

            .doodle_colors {
                position: absolute;
                top: 6px;
                left: 0;
                padding: 6px;

                li {
                    float: left;
                    width: 16px;
                    height: 16px;
                    margin-left: 6px;
                    border: 2px solid #222;
                    border-radius: 50%;
                    transition: .2s ease-in-out;
                }

                li:hover {
                    box-shadow: 0 0 6px #222;
                }
            }

            .doodle_controllers {
                position: absolute;
                top: 6px;
                right: 6px;

                li {
                    float: left;
                    width: 24px;
                    height: 24px;
                    opacity: .5;
                    transition: opacity .2s ease-in-out;
                }

                li:hover {
                    opacity: 1;
                }

                .undo {
                    background: url(../assets/icons/icon-undo.png) no-repeat 2px 2px;
                    background-size: 83.3%;
                }

                .redo {
                    background: url(../assets/icons/icon-redo.png) no-repeat 2px 2px;
                    background-size: 83.3%;
                }

                .clear {
                    background: url(../assets/icons/icon-clear.png) no-repeat 2px 2px;
                    background-size: 83.3%;
                }
            }
        }
    }
</style>